<template>
    <div class="headerTag">
        <el-tag
                v-for="(tag,index) in $store.state.headTag"
                :key="index"
                :type="('/' + tag.index) === $route.path ? '' : 'info'"
                @close="closeHandle(tag)"
                @click="goRouter(tag)"
                closable>
            {{tag.name}}
        </el-tag>
        <el-tag
                key="closeAll"
                v-show="$store.state.closeShow"
                @close="closeHandle('closeAll')"
                closable>
            关闭全部
        </el-tag>
    </div>
</template>

<script>
    export default {
        name: "tags",
        data() {
            return {};
        },
        created() {
            this.$store.getters.getHeadTag;
        },
        methods: {
            closeHandle(tag) {
                this.$store.commit('romveTag', tag);
            },
            goRouter(tag) {
                this.$router.push(tag.index);
            }
        }
    }
</script>

<style scoped lang="scss">
/deep/.el-tag {
    margin-right: 4px;
    cursor: pointer;
    height: 24px;
    line-height: 22px;
    border-radius: 0;
    padding: 0 5px;
}
</style>
